<template>
  <div class="NavHeader">
    <Fold v-if="isFold" class="icon" @click="handleIconClick" />
    <Expand v-if="!isFold" class="icon" @click="handleIconClick" />
    <div class="box">
      <BreadCrumb :breadCrumbs="breadCrumbs" />
      <UserInfo />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import UserInfo from './UserInfo/UserInfo.vue'
import BreadCrumb from '@/base-ui/BreadCrumb/BreadCrumb.vue'
import { pathMapBreadCurmbs } from '@/utils/mapMenusRouter'
import { useRoute } from 'vue-router'
import { useStore } from '@/store'

export default defineComponent({
  components: {
    UserInfo,
    BreadCrumb
  },
  setup(props, { emit }) {
    const route = useRoute()
    const store = useStore()
    const isFold = ref(false)
    const handleIconClick = () => {
      isFold.value = !isFold.value
      emit('foldChange', isFold.value)
    }
    const breadCrumbs = computed(() =>
      pathMapBreadCurmbs(store.state.login.userMenus, route.path)
    )

    return { isFold, handleIconClick, breadCrumbs }
  }
})
</script>

<style scoped lang="less">
.NavHeader {
  height: 50px;
  display: flex;
  align-items: center;

  .icon {
    width: 30px;
    height: 30px;
  }
  .box {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
